{% extends "base.html" %}

{% block title %}XBot管理后台 - 聊天记录{% endblock %}

{% block head %}
{{ super() }}
<link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat-manager.css') }}">
{% endblock %}

{% block page_title %}聊天记录{% endblock %}

{% block content %}
<!-- 状态提示条 -->
<div class="alert alert-info alert-dismissible fade show" id="loginStatusAlert" role="alert" style="display:none;">
  <i class="bi bi-info-circle-fill me-2"></i> 请先登录微信，才能查看完整聊天记录
  <button type="button" class="btn btn-sm btn-outline-primary ms-3" onclick="window.location.href='/'">前往登录</button>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
</div>

<!-- 聊天统计指标 -->
<div class="row mb-4">
  <div class="col-md-3 col-sm-6 mb-3 mb-md-0">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body text-center">
        <div class="d-flex align-items-center justify-content-center mb-3">
          <div class="rounded-circle p-3 bg-primary bg-opacity-10">
            <i class="bi bi-chat-dots text-primary fs-4"></i>
          </div>
        </div>
        <h6 class="text-muted">总消息数</h6>
        <h3 class="fw-bold mb-0" id="totalMessages">0</h3>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6 mb-3 mb-md-0">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body text-center">
        <div class="d-flex align-items-center justify-content-center mb-3">
          <div class="rounded-circle p-3 bg-success bg-opacity-10">
            <i class="bi bi-people text-success fs-4"></i>
          </div>
        </div>
        <h6 class="text-muted">群聊消息</h6>
        <h3 class="fw-bold mb-0" id="groupMessages">0</h3>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6 mb-3 mb-md-0">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body text-center">
        <div class="d-flex align-items-center justify-content-center mb-3">
          <div class="rounded-circle p-3 bg-info bg-opacity-10">
            <i class="bi bi-person text-info fs-4"></i>
          </div>
        </div>
        <h6 class="text-muted">私聊消息</h6>
        <h3 class="fw-bold mb-0" id="privateMessages">0</h3>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6 mb-3 mb-md-0">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body text-center">
        <div class="d-flex align-items-center justify-content-center mb-3">
          <div class="rounded-circle p-3 bg-warning bg-opacity-10">
            <i class="bi bi-calendar-check text-warning fs-4"></i>
          </div>
        </div>
        <h6 class="text-muted">今日消息</h6>
        <h3 class="fw-bold mb-0" id="todayMessages">0</h3>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <!-- 聊天列表面板 -->
  <div class="col-md-5 mb-4" id="chatListPanel">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold">
          <i class="bi bi-chat-left-text me-2 text-primary"></i>聊天列表
        </h5>
        <button class="btn btn-primary btn-sm" onclick="refreshChatList()">
          <i class="bi bi-arrow-clockwise me-1"></i>刷新
        </button>
      </div>
      <div class="card-body p-0">
        <!-- 筛选和搜索 -->
        <div class="p-3 border-bottom">
          <div class="row g-2">
            <div class="col-md-6">
              <div class="btn-group w-100" role="group">
                <button type="button" class="btn btn-outline-secondary btn-sm active" id="filterAll">全部</button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="filterGroups">
                  <i class="bi bi-people me-1"></i>群聊
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="filterPrivate">
                  <i class="bi bi-person me-1"></i>私聊
                </button>
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group input-group-sm">
                <span class="input-group-text bg-white border-end-0">
                  <i class="bi bi-search text-muted"></i>
                </span>
                <input type="text" class="form-control border-start-0" placeholder="搜索聊天..." id="chatSearchInput">
              </div>
            </div>
          </div>
        </div>
        
        <!-- 错误提示 -->
        <div class="alert alert-danger m-3" style="display: none;" id="chatListError"></div>
        
        <!-- 聊天列表容器 -->
        <div class="chat-list-wrapper" id="chatListContainer">
          <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status"></div>
            <p class="mt-3 text-muted">加载中...</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 聊天详情面板 -->
  <div class="col-md-7 mb-4" id="chatDetailPanel">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold" id="chatDetailTitle">
          <i class="bi bi-chat-text me-2 text-primary"></i>聊天详情
        </h5>
        <div>
          <button class="btn btn-outline-secondary btn-sm me-2" id="backButton" onclick="backToChatList()" style="display:none;">
            <i class="bi bi-arrow-left me-1"></i>返回
          </button>
          <button class="btn btn-primary btn-sm" id="refreshDetailButton" onclick="refreshCurrentChat()" style="display:none;">
            <i class="bi bi-arrow-clockwise me-1"></i>刷新
          </button>
        </div>
      </div>
      <div class="card-body p-0">
        <div class="chat-detail-wrapper" id="chatDetailContainer">
          <div class="text-center py-5">
            <i class="bi bi-chat-square-text text-muted fs-1"></i>
            <p class="mt-3 text-muted">选择一个聊天查看详情</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入聊天管理脚本 -->
<script src="{{ url_for('static', filename='js/chat-manager.js') }}"></script>
{% endblock %} 